<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器    语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点
			                 所有元素具备：hover   【常见伪类选择器】
			 
			 */
			h1:hover{
				background: red;
				color: yellow;
			}
			/* 
			 伪类选择器：    link   链接未点击时状态
			                active 链接被点击时状态
							visited 链接点击后状态
							hover   悬停链接时状态
			 主要结合在一起，针对a元素效果
			 */
			 a:link{ /* 未访问状态*/
				color:#ff5500;
				/* 去掉超链接下划线 */
				text-decoration: none;
			}
			 a:active{ /* 被点击时状态 */
				color: #ffaaff;
				background: #ff5500;
			}
			a:visited{ /*点击后状态 */
				color: #00ffff;
				background: #aa55ff;
			}
			a:hover{
				font-size: 36px;
			}
			/* 
			 伪类选择器：  input：focus 获取焦点
			 
			 针对 输入框 input元素
			 */
			input:focus{
				background: #ffff7f;
			}
			/* 伪类选择器：     ：first—child 第一个儿子元素
			                   ：last—child  最后一个儿子元素
							   ：nth—child（n） 匹配n个儿子元素
				针对：父子级，  默认父子级 table、列表	
							   */
		li:first-child{
			background: #aa55ff;
			color: #ff5500;
		}	
		li:last-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #00ffff;
			font-size: 36px;
		}
		li:nth-child(3){
			background: #ffaaff;
			font-size: 30px;
		}				 
		</style>
	</head>
	<body>
		<h1>避雷</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
		
	</body>
</html>